<template>
	<div>
		<zbTable ref="tableRef" :api-fun="get_list" @action="action">
			<template #toolbar>
				<a-space>
					<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
						<template #icon>
							<plus-outlined />
						</template>
						<span>新建</span>
					</a-button>
					<a-button type="dashed" class="ele-btn-icon">
						<template #icon>
							<upload-outlined />
						</template>
						<span>导出</span>
					</a-button>
					<a-button type="dashed" class="ele-btn-icon">
						<a-checkbox v-model:checked="checked" @change="change">不显示离职</a-checkbox>
					</a-button>
				</a-space>
			</template>
		</zbTable>
		<!-- 编辑弹窗 -->
		<user-edit v-if="showEdit" v-model:visible="showEdit" :actionStatus="actionStatus" :editDataId="editDataId" @done="done" />
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import { get_list } from '@/api/user/store_user';
	import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
	import { actionFn } from '@/utils/action.js';
	import zbTable from './components/zbTable/index.vue';
	import userEdit from './components/user-edit.vue';
	//是否显示离职员工
	const checked = ref(false);
	// 当前编辑数据
	const current = ref(null);
	// 是否显示编辑弹窗
	const showEdit = ref(false);
	// 编辑数据
	const editDataId = ref(null);
	// 编辑按钮数据
	const actionData = ref({});
	// 获取子组件
	const tableRef = ref(null);
	const actionStatus = ref('add');
	/* 打开添加弹窗 */
	const openEdit = row => {
		editDataId.value = '';
		current.value = row ?? null;
		showEdit.value = true;
		actionStatus.value = 'add';
		actionData.value = { url: '/user/user/add' };
	};
	
	/* 打开编辑弹窗 */
	const action = data => {
		console.log("编辑：", data);
		editDataId.value = data.row_data.id;
		actionData.value = data.action_data;
		showEdit.value = true;
		actionStatus.value = 'edit';
	};
	/* 更新是否显示离职员工 */
	const change = (e)=>{
		console.log(e.target.checked);
		checked.value = e.target.checked;
	};
	const done = form => {
		actionFn(actionData.value, form, reloadTable);
	};
	const reloadTable = () => {
		showEdit.value = false;
		tableRef.value.reload();
	};
</script>
